<template>
    <div>
        <div>
            <div>
                <el-form ref="form" :model="form">
                    <el-form-item label="网关编号">
<!--                        <el-input readonly v-model="gateway.gatewayNumbers"/>-->
                        <span>{{gateway.gatewayNumbers.toString()}}</span>
                    </el-form-item>
                    <el-form-item label="套餐" prop="productId">
                        <el-select v-model="form.productId"
                                   placeholder="请选择套餐"
                                   @change="changeProduct"
                        >
                            <el-option
                                v-for="item in gatewayPackageList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="套餐价格(元)">
                        <el-input readonly v-model="productInfo.price"/>
                    </el-form-item>
                    <el-form-item label="套餐天数">
                        <el-input readonly v-model="productInfo.dayNum"/>
                    </el-form-item>
                    <!--        <el-form-item label="支付方式" prop="gatewayName">-->
                    <!--            <el-input v-model="form.gatewayName" placeholder="请输入网关名称"/>-->
                    <!--        </el-form-item>-->
                    <el-form-item>
                        <el-button type="success" :disabled="payBtnDisabled" @click="submitProduct">确认下单</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div>
                <div v-if="codeDialogVisible">
                    <!-- 微信支付二维码 -->
                    <div style="display:flex; flex-direction: column; justify-content: center; align-items: center">
                        <qriously :value="codeUrl" :size="300"/>
                        <span style="text-align: center; font-size: 32px">{{ productInfo.price }}元</span>
                        <span style="text-align: center; font-size: 32px">请使用微信扫码支付</span>
                    </div>
                </div>
                <div v-if="payFlag" style="text-align: center">
                    <h1>支付成功</h1>
                </div>
                <div v-if="timeout" style="text-align: center">
                    <h1>订单已超时，请重新生成订单</h1>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import { listGatewayPackageSelect, getGatewayPackage } from '@/api/product/gatewayPackage'
import { nativePay2 } from '@/api/pay/pay'
import { queryOrderStatus } from '@/api/order/order.js'

export default {
    name: 'index',
    props: {
        gateway: {
            type: Object
        }
    },
    data() {
        return {
            gatewayPackageList: [],
            form: {
                productId: null,
                orderType: '0',
                gatewayNumbers:[]
            },
            // 二维码
            codeUrl: '',
            // 订单号
            orderNo: '',
            codeDialogVisible: false,
            payBtnDisabled: false,
            timer: null,
            payFlag: false,
            timeout: false,
            productInfo: {
                price: '选择套餐后查看',
                dayNum: '选择套餐后查看'
            }
        }
    },
    created() {
        this.getList()
    },
    destroyed() {
        if (this.timer != null) {
            clearInterval(this.timer)
        }
    },
    methods: {
        getList() {
            listGatewayPackageSelect().then(response => {
                this.gatewayPackageList = response.data
            })
        },
        submitProduct() {
            this.form.gatewayNumbers=this.gateway.gatewayNumbers
            nativePay2(this.form).then(response => {
                console.log('结果', response)
                this.codeUrl = response.data.codeUrl
                this.orderNo = response.data.orderNo
                this.payBtnDisabled = true
                this.codeDialogVisible = true
                this.payFlag = false
                this.timeout = false
                // 启动定时器
                this.timer = setInterval(() => {
                    this.queryOrderStatus()
                }, 2000)
            })
        },
        // 关闭微信支付二维码对话框时启用"确认支付"按钮
        closeDialog() {
            this.payBtnDisabled = false
            clearInterval(this.timer)
        },
        // 查询订单状态
        queryOrderStatus() {
            queryOrderStatus(this.orderNo).then(response => {
                console.log('查询订单状态', response)
                let orderStatus = response.msg
                if (orderStatus === '支付成功') {
                    clearInterval(this.timer)
                    this.codeDialogVisible = false
                    this.payBtnDisabled = false
                    this.payFlag = true
                    // 三秒后跳转到订单列表
                    // setTimeout(() => {
                    //     this.$router.push({ path: '/orders' })
                    // }, 3000)
                    this.$emit('payBatchSuccess')
                }
                if (orderStatus === '超时已关闭') {
                    clearInterval(this.timer)
                    this.codeDialogVisible = false
                    this.payBtnDisabled = false
                    this.timeout = true
                }
            })
        },
        changeProduct(productId) {
            getGatewayPackage(productId).then(response => {
                this.productInfo = response.data
            })
        }
    }
}
</script>

<style scoped>

</style>
